<!--
 * @Author: your name
 * @Date: 2020-09-10 10:10:51
 * @LastEditTime: 2020-09-13 22:14:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-ant-admin/src/views/About.vue
-->
<template>
  <div class="about">
    <h1>{{ name }}</h1>
  </div>
</template>
<script>
import { computed, reactive } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    const info = reactive({
      firstName: '王',
      lastName: '二狗'
    })

    const name = computed({
      get: () => info.firstName + '-' + info.lastName,
      set(val) {
        const names = val.split('-')
        info.firstName = names[0]
        info.lastName = names[1]
      }
    })

    onBeforeRouteLeave(() => {
      console.log('当当前页面路由离开的时候调用')
    })

    return {
      name
    }
  }
}
</script>
